<template>
    <div class="header">
        <img class="vp-back-img" src="../../assets/img/china/flower.png" alt="">
        <div class="c-header-container">
            <div class="h-title">
                <div class="img-response">
                    <img src="../../assets/img/china/title.png" alt="">
                    <div class="c-black">
                        2017济南第一届
                    </div>
                </div>
                <div class="h-title-text">
                    <div class="timeout">倒计时：{{m}}:{{s}}</div>
                    <div>温馨提示：倒计时结束将自动提交，请在规定时间完成答题</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'pic-header',

        data() {
            return {
                st:2700000
            }
        },

        methods: {

        },

        mounted() {

        },

        computed: {
            t () {
              return this.$store.state.t;
            },

            m () {
                return Math.floor(this.t/1000/60%60) < 10 ? '0' + Math.floor(this.t/1000/60%60) : Math.floor(this.t/1000/60%60)
            },

            s () {
                return Math.floor(this.t/1000%60) < 10 ? '0' + Math.floor(this.t/1000%60) : Math.floor(this.t/1000%60)
            },

            status () {
                return this.$store.state.status;
            }
        },

        watch: {
            'status' (val) {
                console.log({val});
                if (val == 1) {
                    this.$store.state.t = 2700000;
                    let time = setInterval(() => {
                        this.$store.state.t-=1000;
                        if (this.t < 1000) {
                            clearInterval(time);
                            this.$store.dispatch('changeStatus',2)
                        } else if (this.$store.state.status === 2) {
                            clearInterval(time);
                        } else if (this.$store.state.status === 0) {
                            clearInterval(time);
                        }
                    }, 1000);
                } else if (val == 2) {
//                    this.$store.state.t = 10000;
                }
            }
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../plugins/assets/css/flex.less';

    .header{
        position: relative;
        width:100%;
    }
    .vp-back-img{
        position: absolute;
    }
    .c-header-container{
        padding-top: 50px;
        margin: 0 auto;
        width:45%;
    }
    .h-title{
        padding: 50px;
        text-align: center;
        .flex-left;
        > :first-child {
            width: 25%;
        }
        > div {
            width: 60%;
            > :first-child {
                font-size:40px;
                color: #B12828;
            }
            > :last-child {
                font-size:12px;
                font-weight:bold;
            }
            .timeout{
                margin-bottom:10px;
            }
        }
    }

    @media screen and (max-width: 768px) {
        .header{
            position: relative;
            width:100%;
        }
        .vp-back-img{
            position: absolute;
        }
        .c-header-container{
            padding-top: 50px;
            margin: 0 auto;
            width:80%;
        }
        .h-title{
            padding: 5vw;
            text-align: center;
            .flex-auto;
            > :first-child {
                width: 25%;
            }
            > div {
                width: 60%;
                > :first-child {
                    font-size:6vw;
                    color: #B12828;
                }
                > :last-child {
                    font-size:12px;
                    font-weight:bold;
                }
                .timeout{
                    margin-bottom:10px;
                }
            }
        }
    }
</style>